<template>
  <Modal
    :closable="true"
    :mask-closable="true"
    width="700"
    v-model="scoreManageModel"
    class="deviceDrawer score-drawer"
    title="加减分"
    footer-hide
  >
    <div class="flex-between">
      <Select filterable
        v-model="scoreSearch.type"
        placeholder="操作类型"
        @on-change="changeScorePage(1)"
        class="w120"
        clearable
      >
        <Option value="1">减分</Option>
        <Option value="2">加分</Option>
      </Select>
      <Page
        :total="scoreTotal"
        @on-change="changeScorePage"
        show-total
        show-elevator
        :page-size="scoreSearch.pageSize"
        :current="scoreSearch.page"
      />
    </div>
    <Table border :columns="scoreCol" :data="scoreManageList"></Table>
  </Modal>
</template>
<script>
import { getScoreManageList } from '@/api/referee.js';
export default {
  name: 'ScoreManage',
  props: ['sceneId'],
  data() {
    return {
      scoreTotal: 0,
      scoreManageList: [],
      scoreManageModel: false,
      scoreSearch: {
        page: 1,
        pageSize: 10,
        testId: this.sceneId || this.$route.query.id
      },
      scoreCol: [
        {
          title: '操作类型',
          key: 'type',
          tooltip: true,
          render: (h, params) => {
            return h('span', params.row.type === 2 ? '加分' : '减分');
          }
        },
        {
          title: '分值',
          key: 'score',
          tooltip: true,
          render: (h, params) => {
            return h(
              'span',
              {
                style: {
                  color: params.row.type === 2 ? 'green' : 'red'
                }
              },
              params.row.score
            );
          }
        },
        {
          title: '创建者',
          key: 'creatorName',
          tooltip: true
        },
        {
          title: '原因',
          key: 'approvalInfo',
          tooltip: true
        },
        {
          title: '加减分时间',
          key: 'createTime',
          tooltip: true,
          width: 180
        }
      ]
    };
  },
  created() {
    this._scoreSearch = { ...this.scoreSearch };
  },
  methods: {
    openModal(query) {
      this.scoreSearch = { ...this._scoreSearch, ...query };
      this.getScoreManageList();
      this.scoreManageModel = true;
    },
    changeScorePage(page) {
      this.scoreSearch.page = page;
      this.getScoreManageList();
    },
    // 获取加减分列表
    getScoreManageList() {
      getScoreManageList(this.scoreSearch)
        .then(({ data = {} }) => {
          let { code, message } = data;
          data = data.data || {};
          if (code !== 1) {
            this.$Message.warning(message);
            return;
          }
          this.scoreTotal = data.totalCount || 0;
          this.scoreManageList = data.pageData || [];
        })
        .catch(() => {
          this.$Message.error('获取加减分列表异常');
        });
    }
  }
};
</script>
<style scoped>
.w120 {
  width: 120px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
